Ext.onReady(function()
    {
        // HANDLE RENDER
        var columnRenderer = function(value, metaData, record, rowIndex, colIndex, store){
            var combo = this.editor
            var grid = X.get('editConfigGrid');
            var record2= grid.getSelectionModel().getSelected();
           // alert(value);
            if(typeof record.get('idPerfil') === "undefined"){
                //  alert(' hola ' );
                var r = combo.findRecord(combo.valueField, value);
                r= r ? r.get(combo.displayField) : combo.valueNotFoundText;
                record.set('idPerfil', value);
                //if(record.get('idDepartamento')==)
                return r ;
            }
              
            if( (typeof value === "undefined") && !(typeof record.get('idPerfil') === "undefined") ){
              //  alert(value+' value Undefined '+record.get('idPerfil'));
                var r = combo.findRecord(combo.valueField, record.get('idPerfil'));
                r= r ? r.get(combo.displayField) : combo.valueNotFoundText;
                return r;
            }
            var r = combo.findRecord(combo.valueField, value);
            r= r ? r.get(combo.displayField) : combo.valueNotFoundText;
            record.set('idPerfil', value);
            return r ;
        }
        var columnRenderer2 = function(value, metaData, record, rowIndex, colIndex, store){
            var combo = this.editor

            if(typeof record.get('idDepartamento') === "undefined") {
                //   alert('hola2');
                var r = combo.findRecord(combo.valueField, value);
                r= r ? r.get(combo.displayField) : combo.valueNotFoundText;
                record.set('idDepartamento', value);
                //  record.set('idPerfil', r);
                return r
            }
            if( (typeof value === "undefined") && !(typeof record.get('idDepartamento') === "undefined") ){
                //  alert('hola1');
                var r = combo.findRecord(combo.valueField, record.get('idDepartamento'));
                return r ? r.get(combo.displayField) : combo.valueNotFoundText;
            }
           // alert(value);
            var r = combo.findRecord(combo.valueField, value);
            r= r ? r.get(combo.displayField) : combo.valueNotFoundText;
            record.set('idDepartamento', value);
            return r ;
           
        }



        //    // HANDLER AJAX
        var h_editar_success = function(obj){
            X.reload('listGrid');
            X.hide('editWindow');
        }
        var h_editar_failure = function(obj){
            X.focus('editUsername');
        }

        // HANDLE CHECK
        var h_empty_nombre = function()  {
            X.focus('editUsername');
        }
        var h_empty_password     = function(){
            X.focus('editPassword');
        }
        var h_empty_confirmar    = function(){
            X.focus('editConfirmar');
        }
        var h_different_password = function(){
            X.focus('editPassword');
        }

        // STORE
        X.aStore({
            id     : 'EditStoreSexo',
            fields : [ 'idSexo','Sexo' ],
            data   : [
            [1,'Masculino'],[2,'Femenino']
            ]
        });
        X.store({
            id     : 'editStoreDpto',
            fields : [
            'idDepartamento',
            'nombreD'
            
            ]
        });
        X.store({
            id     : 'editStorePerfil',
            fields : [
            'idPerfil',
            'nombre'
            
            ]
        });
        X.store({
            id     : 'editStoreConfig',
            fields : [
            'idPerfil',
            'idDepartamento'
            ]
        });

        var columnModel = new Ext.grid.ColumnModel({
            defaults: {
                menuDisabled: true
            },
            columns: [
            {
                
                header: 'Perfil',
                dataIndex: 'perfil',
                width : 196,
                editor: new X.form.combo({
                   // lazyRender:true,
                    data : '',
                    dfield  :'nombre',
                    vfield  :'idPerfil',
                    storeId :'editStorePerfil'
                }),
                renderer: columnRenderer
               // addListener:function
            },{
          
                header: 'Departamento',
                dataIndex: 'departamento',
                width : 196,
                editor: new X.form.combo({
                    data : '',
                    dfield  :'nombreD',
                    vfield  :'idDepartamento',
                    storeId :'editStoreDpto'
                }),
                renderer: columnRenderer2
            }]
        });
        X.grid.editor({
            id          : 'editConfigGrid',
            title       : 'Configuracion',
            collapsed   : false,
            height      : 200,
            width       : 400,
            cm          : columnModel,
            storeId     : 'editStoreConfig',
            x           : 10,
            y           : 380,
            tbar : new Ext.Toolbar({
                items:[
                X.form.button({
                    text:'Agregar',
                    id:'editaddConfig'//, icon:'/img/icon_agregar.png'
                }),'-',
                X.form.button({
                    text:'Eliminar',
                    id:'editremConfig'/*, icon:'/img/icon_agregar.png'*/
                })
                ]
            })
        });
   
        // FORM
        X.form.panel({
            title  : 'editar Usuario',
            id     : 'editForm',
            height : 700,
            width  : 480,
            items  : [
            X.form.label ({
                x:10,
                y:16,
                text:'Nombre:'
            }),
            X.form.label ({
                x:10,
                y:46,
                text:'Contraseña:'
            }),
            X.form.label ({
                x:10,
                y:76,
                text:'Confirmar:'
            }),
            X.form.label ({
                x:10,
                y:106,
                text:'Nombre:'
            }),
            X.form.label ({
                x:10,
                y:136,
                text:'Apellido:'
            }),
            X.form.label ({
                x:10,
                y:166,
                text:'Documento'
            }),
            X.form.label ({
                x:10,
                y:196,
                text:'E-mail:'
            }),
            X.form.label ({
                x:10,
                y:226,
                text:'Telefono:'
            }),
            X.form.label ({
                x:10,
                y:256,
                text:'Cargo:'
            }),
            X.form.label ({
                x:10,
                y:286,
                text:'Sexo:'
            }),
            X.form.hidden({
                id:'editCodigoUsuario'
            }),
            X.form.text  ({
                x:90,
                y:10,
                width:300,
                id:'editUsername',
                maxlen:64
            }),
            X.form.pass  ({
                x:90,
                y:46,
                width:300,
                id:'editPassword',
                maxlen:32
            }),
            X.form.pass  ({
                x:90,
                y:76,
                width:300,
                id:'editConfirmar',
                maxlen:32
            }),
            X.form.text  ({
                x:90,
                y:106,
                width:300,
                id:'editNombre',
                maxlen:64
            }),
            X.form.text  ({
                x:90,
                y:136,
                width:300,
                id:'editApellido',
                maxlen:64
            }),
            X.form.text  ({
                x:90,
                y:196,
                width:300,
                id:'editEmail',
                maxlen:64
            }),
            X.form.number  ({
                x:90,
                y:166,
                width:300,
                id:'editDocumento',
                maxlen:64
            }),
            X.form.text  ({
                x:90,
                y:226,
                width:300,
                id:'editTelefono',
                maxlen:64
            }),
            X.form.text  ({
                x:90,
                y:256,
                width:300,
                id:'editCargo',
                maxlen:64
            }),
            X.form.combo({
                id:'editSexo',
                x:90,
                y:286,
                width:100,
                dfield  :'Sexo',
                vfield  :'idSexo',
                storeId :'EditStoreSexo'
            }),
            X.form.button({
                x:90,
                y:640,
                width:80,
                id:'editEditar',
                text:'Grabar'
            }),
            X.form.button({
                x:175,
                y:640,
                width:80,
                id:'editCancelar',
                text:'Cancelar'
            }),
            new Ext.form.Checkbox({
                x:395,
                y:89,
                id:'editModificar'
            }),
            X.form.label ({
                x:410,
                y:78,
                html:'<p style="line-height:15px;">Modificar<br>contraseña</p>'
            }),
            X.get('editConfigGrid')
            ]
        });


        X.event.check('editModificar', function(field, state){
            X.get('editPassword').setDisabled(!state);
            X.get('editConfirmar').setDisabled(!state);
            if (X.get('editModificar').checked){
                X.focus('editPassword');
            }
        });
        X.event.button('editaddConfig', function(){
            var grid = X.get('editConfigGrid');
            grid.stopEditing();
            grid.store.insert(0,new grid.store.recordType({}));
            grid.startEditing(0,0);
            grid.getSelectionModel().selectRow(0);
        });

        X.event.button('editremConfig', function(){
            var grid = X.get('editConfigGrid');
            var record = grid.getSelectionModel().getSelected();
            if (record) {
                var index = grid.store.indexOf(record);
                grid.store.removeAt(index);
                if (index < grid.store.getCount())
                    grid.getSelectionModel().selectRow(index);
                else
                    grid.getSelectionModel().selectRow(index-1);
            }
        });

        // EVENT
        X.event.button('editEditar', function(){
            var store = X.get('editStoreConfig');
            var rowCount = store.getCount();
            if (X.isempty('editUsername'))
                X.msg.failure('Complete el campo "Nombre".', h_empty_nombre);
            else if (X.get('editModificar').checked && X.isempty('editPassword'))
                X.msg.failure('Complete el campo "Contraseña".', h_empty_password);
            else if (X.get('editModificar').checked && X.isempty('editConfirmar'))
                X.msg.failure('Complete el campo "Confirmar".', h_empty_confirmar);
            else if (X.get('editModificar').checked && X.value('editPassword')!=X.value('editConfirmar'))
                X.msg.failure('El campo "Contraseña" debe ser igual al campo "Confirmar".', h_different_password);
            else if(rowCount<=0)
                X.msg.failure('Debe definir al menos una configuracion');
            else{
                var flag=0;
                var grid = X.get('editConfigGrid');
 
                for (var i=0; i<rowCount; i++){
                    var record = store.getAt(i);
                   
                    if(!(record.get('idPerfil'))){
                        grid.getSelectionModel().selectRow(i);
       
                        X.msg.failure('Debe especificar el perfil');
                        flag=1;
                    }
                     if(!(record.get('idDepartamento'))){
                        grid.getSelectionModel().selectRow(i);

                        X.msg.failure('Debe especificar el departamento');
                        flag=1;
                    }
                }
               // flag=1;
                grid.getSelectionModel().selectAll();
                var sm = grid.getSelectionModel().getSelections();
                var configs = new Array();
                for (i=0; i<=sm.length-1; i++) {
                    var data = {
                        perfil:'',
                        departamento:''
                    };
                 
                    data.perfil=sm[i].get('idPerfil');
                    data.departamento=sm[i].get('idDepartamento');
                    configs.push(data);
                    delete data;
                    data = {};
                }
                if (flag==0){
                    X.ajax({
                        url:'/usuario/ajax-editar',
                        targetId:'editForm',
                        params:{
                            codigoUsuario:X.value('editCodigoUsuario'),
                            nombreUsuario : X.value('editUsername'),
                            password: X.value('editPassword'),
                            nombre: X.value('editNombre'),
                            apellido: X.value('editApellido'),
                            documento: X.value('editDocumento'),
                            telefono: X.value('editTelefono'),
                            cargo: X.value('editCargo'),
                            email: X.value('editEmail'),
                            sexo:X.value('editSexo'),

                            configuraciones: Ext.encode(configs)
                        },
                        afterSuccess:h_editar_success,
                        afterFailure:h_editar_failure
                    });

                }
            }
        });

        X.event.button('editCancelar', function(){
            X.hide('editWindow');
        });


        // WINDOW
        X.win.panel({
            id            : 'editWindow',
            defaultButton : 'editUsername',
            resizable: false,
            items         : X.get('editForm')

        });

        X.get('editWindow').begin = function(){
            // el if para asegurar abrir una sola ventana (aunque sea modal)
            if (X.get('editWindow').isVisible()==false){
                X.show('editWindow');
            //   X.focus('editUsername', '');
            // alert('hola');
            }
        
        
        }
    });






